<template>
    <div class="enterprise">
        <div class="exception-top">
            <a-form-model layout="inline" :model="page" :colon="false">
                <a-form-model-item label="公司名称">
                    <a-input v-model="page.companyName" @keyup.enter="searchFn" placeholder="请输入公司名称" allowClear />
                </a-form-model-item>
              <a-form-model-item label="mn号">
                <a-input v-model="page.mn" @keyup.enter="searchFn" placeholder="请输入mn号" allowClear />
              </a-form-model-item>
                <a-form-model-item>
                    <a-button type="primary" @click="searchFn">搜索</a-button>
                </a-form-model-item>
            </a-form-model>
            <a-button type="primary" @click="addTreeFn">添加</a-button>
        </div>
        <div class="exception-content">
            <my-table :data-source="tableData" :pagination="false" :rowKey="record=> record.id">
                <a-table-column title="序号" width="80px" align="center" :ellipsis="true" :customRender="(text, record, index) =>(page.current - 1) * page.size + index + 1" />
                <a-table-column title="公司名称" data-index="companyName" align="center" :ellipsis="true" />
                <a-table-column title="公司类型" data-index="companyType" align="center" :ellipsis="true" />
                <a-table-column title="公司地址" data-index="address" align="center" :ellipsis="true" />
                <a-table-column title="联系人" data-index="contactPerson" align="center" :ellipsis="true" />
                <a-table-column title="联系电话" data-index="contactPhone" align="center" :ellipsis="true" />
                <a-table-column title="操作" align="center" width="150px">
                    <template slot-scope="text,record,index">
                        <div class="handle">
                            <a-button size="small" type="primary" @click="editFn(record,index)">修改</a-button>
                            <a-button size="small" type="danger" :disabled="delDisabled" @click="delFn(record.id)">删除</a-button>
                        </div>
                    </template>
                </a-table-column>
            </my-table>
        </div>
        <div class="exception-bottom clearfix">
            <div class="page-box">
                <a-pagination :show-total="total => `共 ${total} 条记录`" v-model="page.current" :total="total" :defaultPageSize="page.size" :item-render="itemRender" hideOnSinglePage @change="pagechangeFn" />
            </div>
        </div>
        <!-- 添加弹框 -->
        <modal :visible="addPop" width="60%" :title="title"  @cancel="cancel" @ok="formSubFn" :footer="true" :destroyOnClose="true">
            <a-form-model ref="formrules" @keyup.enter.native="formSubFn" :rules="formrules" :model="form" :label-col="{ span: 6 }" :wrapper-col="{span:18}" :colon="false">
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="公司名称" prop="companyName">
                            <a-input v-model="form.companyName" />
                        </a-form-model-item>
                        <a-form-model-item label="公司类别" prop="companyType">
                          <a-select v-model="form.companyType">
                            <a-select-option :value="item" v-for="(item,index) in companyType" :key="item">
                              {{item}}
                            </a-select-option>
                          </a-select>
                        </a-form-model-item>
                        <a-form-model-item label="公司简称" prop="companyShort">
                            <a-input v-model="form.companyShort" />
                        </a-form-model-item>
                        <a-form-model-item label="公司代码">
                            <a-input v-model="form.companyCode" />
                        </a-form-model-item>
                        <a-form-model-item label="公司法人" prop="corporate">
                            <a-input v-model="form.corporate" />
                        </a-form-model-item>
                        <a-form-model-item label="公司地址" prop="address">
                            <a-input v-model="form.address" />
                        </a-form-model-item>
                        <a-form-model-item label="公司坐标" prop="geom">
                            <a-input v-model="form.geom" @focus="multiPolygon" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="联系人" prop="contactPerson">
                            <a-input v-model="form.contactPerson" />
                        </a-form-model-item>
                        <a-form-model-item label="联系电话" prop="contactPhone">
                            <a-input v-model="form.contactPhone" />
                        </a-form-model-item>
                        <a-form-model-item label="排放类型" prop="emissionType">
                            <a-input v-model="form.emissionType" />
                        </a-form-model-item>
                        <a-form-model-item label="控制类别" prop="controlLevel">
                            <a-input v-model="form.controlLevel" />
                        </a-form-model-item>
                        <a-form-model-item label="行政区" prop="areaId">
                          <a-tree-select v-if="dataLoading1" :treeDefaultExpandAll="true" v-model="form.areaId" :tree-data="treeData" :dropdownStyle="{maxHeight:'400px',overflow: 'auto'}"  :replaceFields="{title:'name',key:'id',value:'id',children:'menuList'}"  />
                        </a-form-model-item>
                        <a-form-model-item label="公司邮箱" prop="companyPostcode">
                            <a-input v-model="form.companyPostcode" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
            <template slot="footer">
                <a-button type="primary" @click="formSubFn">确定</a-button>
            </template>
        </modal>
        <!-- 经纬度弹窗 -->
      <MapLotlng ref="MapLotlng" :latlng="{x:form.x,y:form.y}" @coordinateChang="coordinateChang"></MapLotlng>
    </div>
</template>

<script>
import modal from '@/components/modal/index.vue'
import company from "@/views/components/mixin/company";
import MapLotlng from "@/components/Map-Latlng"
import moment from "moment";
export default {
  mixins:[company],
  components:{
    modal,
    MapLotlng
  },
  data() {
    return {
      delDisabled: true,
      dataLoading1: false,
      treeDatas: [], //  运维点树形下拉
      moment,
      title: "",
      addPop: false, // 弹窗是否显示
      tableData: [], // 表格数据
      page: {
        // 分页数据查询
        current: 1,
        size: 10,
        companyName: "",
        mn: '',
        isSystem: true
      },
      companyType: ['一般排污者', '小型三产', '建筑施工', '固体废物处理厂', '畜牧养殖业', '重金属单位'],
      treeData: [], // 弹窗树形数
      form: {
        // 弹窗添加表单数据
        companyName: "", // 公司名称
        companyType: "", //  公司类型
        companyShort: "", // 公司简称
        companyCode: "", // 组织机构代码
        corporate: "", // 公司法人
        address: "", //  公司地址
        companyPostcode: "", //  公司邮箱
        fax: "", // 传真
        contactPerson: "", // 联系人
        contactPhone: "", //  联系电话
        emissionType: "", // 排放类型
        controlLevel: "", // 控制类别
        areaId: "", // 所属区划
        geom: "",
        x: "",
        y: "",
      },
      // 表单验证
      formrules: {
        companyName: [
          {
            required: true,
            message: "公司名称必填",
            trigger: "blur",
          },
        ],
        companyType: [
          {required: true, message: '请选择公司类别', trigger: 'blur'}
        ],
        companyShort: [{required: true, message: "公司简称必填", trigger: "blur"}],
        // corporate: [{required: true, message: "公司法人必填",trigger: "blur"}],
        address: [
          {
            required: true,
            message: "公司地址必填",
            trigger: "blur",
          },
        ],
        areaId: [
          {
            required: true,
            message: "所属区划必填",
            trigger: "change",
          },
        ],
        geom: [
          {
            required: true,
            message: "公司坐标必填",
            trigger: ['change', 'blur'],
          },
        ],
      },
      total: 0,

    };
  },
    methods: {
      coordinateChang(data){
        this.form.x = data.x;
        this.form.y = data.y;
        this.form.geom = data.geom;
        console.log(data)
      },
      // 数据获取方法
      getTreeData() {
        this.$api.getAllAreasList().then((res) => {
              if (res.data.code == 0) {
                res.data.data.forEach(v=>{
                  v.selectable = false;
                  v.menuList.forEach(item=>{
                    item.selectable = false;
                  })
                })
                this.treeData = res.data.data;
                this.dataLoading1 = true;
              } else {
                this.$message.info(res.data.errorMessage);
              }
            });
      },
      // 添加弹窗经纬度框事件
      multiPolygon(e) {
        e.target.blur();
        this.$refs.MapLotlng.mapModel = true;
        this.$refs.MapLotlng.initData();
      },

      ////
        searchFn() {
            // 搜索按钮方法
            this.page.current = 1;
            this.getData();
        },
        addTreeFn() {
            // 添加按钮方法
            this.title = "添加企业";
            this.addPop = true;
        },
        editFn(record) {
          console.log(record)
          this.setDataMonitoring(record,[1],false)

        },
        delFn(id) {
            let _that = this;
            this.$confirm({
                title: "是否确认删除?",
                onOk() {
                    _that.$api.delCompanyRemove(id).then((res) => {
                        console.log(res.data);
                        if (res.data.data == true) {
                            _that.$message.info("删除成功");
                            _that.getData();
                        }
                    });
                },
                onCancel() {
                    console.log("Cancel");
                },
                class: "delk",
            });
        },
      // 关闭弹窗
      cancel() {
        this.form = {
          // 弹窗添加表单数据
          companyName: "", // 公司名称
          companyType: "", //  公司类型
          companyShort: "", // 公司简称
          companyCode: "", // 组织机构代码
          corporate: "", // 公司法人
          address: "", //  公司地址
          companyPostcode: "", //  公司邮箱
          fax: "", // 传真
          contactPerson: "", // 联系人
          contactPhone: "", //  联系电话
          emissionType: "", // 排放类型
          controlLevel: "", // 控制类别
          areaId: "", // 所属区划
          geom: "",
          x: "",
          y: "",
        };
        this.addPop = false
      },
        formSubFn() {
            // 弹窗确定按钮方法
            console.log(this.form);
            this.$refs.formrules.validate((valid) => {
                if (valid) {
                    if (this.title == "添加企业") {
                        this.postTreeData();
                    } else {
                        this.$api.putCompanyEdit(this.form).then((res) => {
                            if (res.data.code == 0) {
                                this.$message.info("修改成功");
                                this.getData();
                                this.cancel();
                            } else {
                                this.$message.warning(res.data.errorMessage);
                            }
                        });
                    }
                }
            });
        },
        // 分页方法
        itemRender(current, type, originalElement) {
            if (type === "prev") {
                return <a>上一页</a>;
            } else if (type === "next") {
                return <a>下一页</a>;
            }
            return originalElement;
        },
        pagechangeFn(page, pageSize) {
            this.page.current = page;
            this.getData();
        },
        // 添加方法
        postTreeData() {
          this.$api.postCompanySave(this.form).then(res => {
            if (res.data.code == 0) {
              this.addPop = false;
              this.form = {};
              this.$message.info(res.data.errorMessage)
              this.getData();
            } else {
              this.$message.warning(res.data.errorMessage)
            }
          });
        },
        getData() {
            this.$api.postCompanyFindByPage(this.page).then((res) => {
                if (res.data.code == 0) {
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                    if (res.data.data.length == 0 && this.page.current > 1) {
                        this.page.current -= 1;
                        this.getData();
                    }
                }
            });
        },
    },
    mounted() {
        this.getData();
        this.getTreeData();
        console.log(userData)
        userData.isDelete.forEach(v=>{
          if(v==this.$user.username){
            this.delDisabled = false;
          }
        })
      console.log(this.$user);
    },

};
</script>

<style lang="scss" scoped>
.enterprise {
    width: 100%;
    height: 100%;
    padding: 1%;
    box-sizing: border-box;
    .exception-top {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .exception-content {
        width: 100%;
        height: calc(94% - 60px);
        .handle {
            display: flex;
            justify-content: space-around;
        }
    }
    .page-box {
        float: right;
        // 分页
    }
}

</style>
